<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/static/js/jquery-1.8.2.min.js"></script>
  <link rel="stylesheet" href="/static/css/css.css">
</head>
<body>
<div style="text-align: center">
  贷款金额:<input type="text" id="money"><br>
  贷款期限:<select id="time">
  <option value="1">1年(12期)</option>
  <option value="5">5年(60期)</option>
  <option value="10">10年(120期)</option>
  <option value="15">15年(180期)</option>
  <option value="20">20年(240期)</option>
  <option value="25">25年(300期)</option>
  <option value="30">30年(360期)</option>
</select><br>
  年利率:<input type="text" id="nnl">%<br>
  还款方式:<input type="radio" value="1" name="fs">等额本息 <input type="radio" value="2" name="fs">等额本金<br>
  <input type="button" value="计算" id="计算">
</div>
<div id="div" style="text-align: center" hidden>
  <hr>
  贷款总额:<span id="贷款总额"></span>元<br>
  还款月数:<span id="还款月数"></span>月<br>
  利息总额:<span id="利息总额"></span>元<br>
  累计还款总额:<span id="累计还款总额"></span>元<br>
<!--  最高月供:<span id="最高月供"></span>元<br>-->
<!--  最高月付利息:<span id="最高月付利息"></span>元-->
</div>
<div id="div3" style="text-align: center" hidden>
  <hr>
  贷款总额:<span id="贷款总额1"></span>元<br>
  还款月数:<span id="还款月数1"></span>月<br>
  每月月供:<span id="每月月供1"></span>元<br>
  累计还款总额:<span id="累计还款总额1"></span>元<br>
</div>
<div id="div2" style="text-align: center" hidden>
  <hr>
  <table align="center" border="1" id="table">
  </table>
</div>
</body>
<script>

  $("#计算").click(function () {
    var fs = $("[name='fs']:checked").val();
    if (fs==2){
      $("#div3").attr("hidden",true)
      var money = $("#money").val();
      var time = $("#time").val();
      var nnl = $("#nnl").val();

      $("#div").attr("hidden",false);
      $("#贷款总额").html(money);
      $("#还款月数").html(time*12);
      // 利息总额
      var sum = 0;
      var time1 = time*12;
      for (var i=1;i<=time1;i++){
        // sum += parseInt(money)/time1 + ((i-1)*parseInt(money)/time1)*(nnl/100/time1)
        sum += (parseInt(money)-(i-1)*parseInt(money)/time1) * (nnl/100/12);
      }
      $("#利息总额").html(sum.toFixed(2));
      $("#累计还款总额").html((parseInt(money)+sum).toFixed(2));
      $("#最高月供").html((parseInt(money)/time1+parseInt(money)*(nnl/100)/12).toFixed(2));
      $("#最高月付利息").html((parseInt(money)*(nnl/100)/12).toFixed(2));

      $("#div2").attr("hidden",false);
      $("#table").empty();
      $("#table").append("<tr>\n" +
              "      <td>期次</td>\n" +
              "      <td>偿还本息</td>\n" +
              "      <td>偿还利息</td>\n" +
              "      <td>偿还本金</td>\n" +
              "      <td>剩余本金</td>\n" +
              "    </tr>")
      for (var i=1;i<=time1;i++){
        var 偿还本息 = ((parseInt(money)/time1)+((parseInt(money)-(i-1)*parseInt(money)/time1)*nnl/100/12)).toFixed(2);
        var 偿还本金 = (parseInt(money)/time1).toFixed(2);
        var 偿还利息 = (偿还本息-偿还本金).toFixed(2);
        var 剩余本金 = (parseInt(money)-(parseInt(money)/time1)*i).toFixed(2);
        // alert(i+"#"+偿还本息+"#"+偿还利息+"#"+偿还本金+"#"+剩余本金);
        $("#table").append("<tr>\n" +
                "                <td>"+i+"</td>\n" +
                "                <td>"+偿还本息+"</td>\n" +
                "                <td>"+偿还利息+"</td>\n" +
                "                <td>"+偿还本金+"</td>\n" +
                "                <td>"+剩余本金+"</td>\n" +
                "              </tr>"
        )
      }
    }

    if (fs==1){
      $("#div3").attr("hidden",false);
      $("#div").attr("hidden",true);
      $("#div2").attr("hidden",false);
      $("#table").empty();
      $("#table").append("<tr>\n" +
              "      <td>期次</td>\n" +
              "      <td>偿还本息</td>\n" +
              "      <td>偿还利息</td>\n" +
              "      <td>偿还本金</td>\n" +
              "      <td>剩余本金</td>\n" +
              "    </tr>")
      var money = $("#money").val();
      var time = $("#time").val();
      var nnl = $("#nnl").val();
      var time1 = time*12;
      var chbx =  ((parseInt(money)*nnl/100/12)*Math.pow((1+nnl/100/12),time1)/((Math.pow((1+nnl/100/12),(time1)))-1)).toFixed(2)
      $("#每月月供1").html(chbx);
      $("#贷款总额1").html(money);
      $("#还款月数1").html(time1);

      var 偿还利息 = parseInt(money)*nnl/100/12;
      var 剩余本金 = parseInt(money)-chbx+偿还利息;
      //偿还利息总和
      var sum = 偿还利息;
      for (var i=1;i<=time1;i++){
        var 偿还本金 = (chbx-偿还利息).toFixed(2);
        $("#table").append("<tr>\n" +
                "                  <td>"+i+"</td>\n" +
                "                  <td>"+chbx+"</td>\n" +
                "                  <td>"+偿还利息+"</td>\n" +
                "                  <td>"+偿还本金+"</td>\n" +
                "                  <td>"+剩余本金+"</td>\n" +
                "                </tr>");
        偿还利息 = parseFloat((剩余本金*nnl/100/12).toFixed(2));
        sum += 偿还利息;
        剩余本金 = (parseInt(money)-chbx*(i+1)+sum).toFixed(2);
        if (剩余本金<0){
          剩余本金 = 0;
        }
      }
      $("#累计还款总额1").html(time1*chbx)
    }
  })
</script>
</html>
